<template>
	<view class="nothing" v-if="!banks.length && pageShow">
		<image src="/static/nothing.png" mode=""></image>
		<text class="text">暂无银行卡</text>
		<view class="btn-add" @click="$path.navigateTo('./bankCardInfo')">添加银行卡</view>
	</view>

	<view class="content" v-if="banks.length">
		<view class="card-nums">
			<view>我的卡 <text class="num">（共{{banks.length}}张）</text> </view>
			<view @click="compile = !compile">{{compile?"取消编辑" : "编辑"}}</view>
		</view>

		<view class="card">
			<view class="card-item" v-for="(item,index) in banks">
				<image :src="item.bank_logo" mode=""></image>
				<view class="title">
					<view>{{item.bank_title}}</view>
					<view>***********{{item.card_no.slice(-5)}}</view>
				</view>
				<view class="radio">
					<radio v-if="compile"
						color="#F6941D"
						:checked="select == index"
						@click="select = index"
						style="transform:scale(0.7)" />
				</view>
			</view>
		</view>

		<view class="btn" v-if="!compile" @click="$path.navigateTo('./bankCardInfo')">
			<up-icon name="plus" color="#333333" size="20"></up-icon>
			<text class="text">立即添加</text>
		</view>

		<view class="btn-compile"
			v-if="compile"
			@click="delete_user_bank">
			<view>删除</view>
		</view>
	</view>
</template>

<script setup>
	import { onShow } from '@dcloudio/uni-app'
	import { reactive, ref } from 'vue';
	import api from '../../api/api';
	const compile = ref(false)

	onShow(() => {
		user_banks()
	})

	const banks = reactive([])
	const pageShow = ref(false)
	const select = ref(-1)

	function user_banks() {
		api.user.user_banks()
			.then(res => {
				res.data.forEach(x => {
					x.bank_logo = JSON.parse(x.bank_json_data).bank_logo
					x.bank_title = JSON.parse(x.bank_json_data).bank_title
				})
				Object.assign(banks, res.data)
				console.log(res.data, 'ss')
				pageShow.value = true
			})
	}

	function delete_user_bank() {
		if (select.value == -1) return uni.$showMsg("请选择要删除的银行卡")
		uni.showModal({
			title: '提示',
			content: '是否删除该银行卡信息',
			success: function(res) {
				if (res.confirm) {
					api.user.delete_user_bank({
						user_bank_id: banks[select.value].user_bank_id
					}).then(res => {
						uni.$showMsg("删除成功")
						banks.length = 0
						compile.value = false
						pageShow.value = false
						user_banks()
					})
				}
			}
		});
	}
</script>

<style lang="scss">
	.content {
		.card-nums {
			display: flex;
			justify-content: space-between;
			padding: 52rpx 32rpx;
			color: #333333;
			font-size: 32rpx;
			font-weight: 600;

			.num {
				color: #bebebe;
				font-size: 32rpx;
			}

			>view:nth-child(2) {
				width: 128rpx;
				height: 52rpx;
				line-height: 52rpx;
				text-align: center;
				background: #FFEFDB;
				border-radius: 26rpx;
				font-weight: 500;
				font-size: 24rpx;
				color: #F6941D;
			}
		}
	}

	.nothing {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		height: 100vh;

		>image {
			width: 248rpx;
			height: 248rpx;
		}

		.text {
			font-weight: 400;
			font-size: 28rpx;
			color: #AAAAAA;
			margin-top: 40rpx;
		}

		.btn-add {
			width: 248rpx;
			height: 78rpx;
			line-height: 78rpx;
			text-align: center;
			border: 2rpx solid #F6941D;
			border-radius: 40rpx;
			font-weight: 500;
			font-size: 24rpx;
			color: #F6941D;
			margin-top: 52rpx;
		}
	}

	.card {
		width: 686rpx;
		height: 160rpx;
		background: #FFFFFF;
		border-radius: 12rpx;
		margin: 0 auto;

		.card-item {
			padding: 44rpx 32rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;

			image {
				width: 72rpx;
				height: 72rpx;
			}

			.title {
				width: 65%;
				display: flex;
				flex-direction: column;
				font-weight: 600;
				font-size: 32rpx;
				color: #333333;

				>view:nth-child(2) {
					font-weight: 400;
					font-size: 20rpx;
					color: #BEBEBE;
					margin-top: 20rpx;
				}
			}

			.radio {
				width: 60rpx;
			}
		}
	}

	.btn {
		width: 686rpx;
		height: 100rpx;
		font-weight: 600;
		border-radius: 8rpx;
		font-size: 28rpx;
		color: #333333;
		position: absolute;
		bottom: 50rpx;
		left: 32rpx;
		display: flex;
		align-items: center;
		padding: 0 32rpx;
		box-shadow: 0 0 20rpx #dcdcdc;

		.text {
			line-height: 1;
			margin-left: 20rpx;
		}
	}


	.btn-compile {
		display: flex;
		align-items: center;
		justify-content: flex-end;
		padding: 0 32rpx;
		color: #333333;
		font-size: 32rpx;
		font-weight: 600;
		position: absolute;
		bottom: 50rpx;
		left: 32rpx;
		width: 686rpx;
		height: 120rpx;
		box-shadow: 0 0 20rpx #dcdcdc;

		>view {
			width: 200rpx;
			height: 80rpx;
			line-height: 80rpx;
			text-align: center;
			background: #D31403;
			font-weight: 500;
			font-size: 24rpx;
			color: #ffffff;
			border-radius: 40rpx;
		}
	}
</style>